<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提现管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="min-h-screen">
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4">
                <h1 class="text-2xl font-bold text-gray-900">提现管理</h1>
            </div>
        </header>

        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 搜索栏 -->
            <div class="bg-white shadow rounded-lg p-6 mb-6">
                <div class="grid grid-cols-4 gap-4">
                    <div>
                        <input type="text" placeholder="分销员姓名" class="w-full border rounded-md px-4 py-2">
                    </div>
                    <div>
                        <input type="text" placeholder="提现单号" class="w-full border rounded-md px-4 py-2">
                    </div>
                    <div>
                        <select class="w-full border rounded-md px-4 py-2">
                            <option value="">提现状态</option>
                            <option value="1">待审核</option>
                            <option value="2">待打款</option>
                            <option value="3">已完成</option>
                            <option value="4">已驳回</option>
                        </select>
                    </div>
                    <div>
                        <input type="date" class="w-full border rounded-md px-4 py-2">
                    </div>
                </div>
                <div class="flex justify-end space-x-4 mt-4">
                    <button class="px-6 py-2 bg-blue-600 text-white rounded-md">搜索</button>
                    <button class="px-6 py-2 border rounded-md">重置</button>
                    <button class="px-6 py-2 bg-green-600 text-white rounded-md">导出记录</button>
                </div>
            </div>

            <!-- 数据概览 -->
            <div class="grid grid-cols-4 gap-6 mb-6">
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="text-sm text-gray-500">今日提现金额</div>
                    <div class="text-2xl font-bold mt-2">¥12,345.67</div>
                    <div class="text-sm text-gray-500 mt-2">12笔申请</div>
                </div>
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="text-sm text-gray-500">本月提现金额</div>
                    <div class="text-2xl font-bold mt-2">¥123,456.78</div>
                    <div class="text-sm text-gray-500 mt-2">89笔申请</div>
                </div>
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="text-sm text-gray-500">待审核金额</div>
                    <div class="text-2xl font-bold mt-2">¥23,456.78</div>
                    <div class="text-sm text-gray-500 mt-2">34笔申请</div>
                </div>
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="text-sm text-gray-500">待打款金额</div>
                    <div class="text-2xl font-bold mt-2">¥34,567.89</div>
                    <div class="text-sm text-gray-500 mt-2">45笔申请</div>
                </div>
            </div>

            <!-- 提现列表 -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提现信息</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分销员信息</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提现金额</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提现账户</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- 提现申请1 -->
                        <tr>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">提现单号：TX20240101001</div>
                                <div class="text-sm text-gray-500">备注：1月份佣金提现</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">张三</div>
                                <div class="text-sm text-gray-500">138****8000</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥5,000.00</td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">微信零钱</div>
                                <div class="text-sm text-gray-500">张三</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">待审核</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-01 10:00:00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                                <a href="#" class="text-blue-600 hover:text-blue-900">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">通过</a>
                                <a href="#" class="text-red-600 hover:text-red-900">驳回</a>
                            </td>
                        </tr>

                        <!-- 提现申请2 -->
                        <tr>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">提现单号：TX20240101002</div>
                                <div class="text-sm text-gray-500">备注：12月佣金提现</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">李四</div>
                                <div class="text-sm text-gray-500">139****9000</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥3,000.00</td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">支付宝</div>
                                <div class="text-sm text-gray-500">139****9000</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">待打款</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-01 14:30:00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                                <a href="#" class="text-blue-600 hover:text-blue-900">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">确认打款</a>
                            </td>
                        </tr>

                        <!-- 提现申请3 -->
                        <tr>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">提现单号：TX20240101003</div>
                                <div class="text-sm text-gray-500">备注：佣金提现</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">王五</div>
                                <div class="text-sm text-gray-500">137****7000</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥2,000.00</td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">银行卡</div>
                                <div class="text-sm text-gray-500">工商银行(1234)</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-01 16:45:00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                                <a href="#" class="text-blue-600 hover:text-blue-900">查看</a>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- 分页 -->
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">上一页</a>
                        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">下一页</a>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">显示第 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">24</span> 条</p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">上一页</span>
                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                    </svg>
                                </a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
                                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700">...</span>
                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">8</a>
                                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">下一页</span>
                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>